@import "reset.min.css";

// 第二步: flexbox 布局
@mixin flex-ui {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
@mixin justify-content {
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
@mixin align-items {
    -webkit-box-align:center;
    box-align:center;
    -wekit-align-items:center;
    align-items:center;
}
@mixin flex-1 {
    -webkt-box-flex:1 1 auto;
    flex:1;
}
@mixin flex-wrap {
    flex-wrap:wrap;
}

//  主题库对应的minxin 
$black:black;
$red: red;
$green: green;
$blue: blue;
$orange: orange;
$purple: purple;
$url: '';

// 自定义主题库
$themes-color:(
    default:(
        color:$black,
        border:1px solid $black,
        background:$black,
    ),
    black:(
        color:$black,
        border:1px solid $black,
        background:$black
    ),
    red: (
        fontColor: $red,
        bgColor: $red,
        borderColor:1px solid $red,
    ),
    green: (
        fontColor: $green,
        bgColor: $green,
        borderColor:1px solid $green
    ),
    blue: (
        fontColor: $blue,
        bgColor: $blue,
        borderColor:1px solid $blue
    ),
    orange: (
        fontColor: $orange,
        bgColor: $orange,
        borderColor:1px solid $orange
    ),
    purple: (
        fontColor: $purple,
        bgColor: $purple,
        borderColor:1px solid $purple
    )
);

/* @mixin themesColor($thems:$thems-color) {
    
}; */

// $map 列表函数 ()  $name 名称
// If you really want to use the color value here, use '"" + $name'.
// .theme-#{$name}   !global  map-get($keys)
// @content

$themeCol:();  //  全局变量

@mixin name() {
    @each $name, $map in $themes-color {
        #{".theme-"+$name} & {
            @each $key,$value in $map {
                $themeCol: map-merge($themeCol, ($key: $value)) !global;
            }
            @content;
        }
    }
}




// $themeCol 列表函数里面对应的key的value
@function themed($keys){
    @return  map-get($themeCol,$keys)
}





html{
    font-size:13.3333vw;
}
[class *= "icon-"]{
    width:.5rem;
    height:.5rem;
    display: block;
    @include name{
        background:themed("bgColor");
    }
}
header{
    @include flex-ui;
    @include justify-content;
    @include align-items;
    height:1.2rem;
    font-size:.36rem;
    @include name{
        border:themed("borderColor");
        color:themed("fontColor") 
    }
}

nav{
   ul{
       @include flex-ui;
       @include flex-wrap;
       li{
           list-style: none;
           width:33.33%;
           height:1rem;
        //   @include flex-1;
        box-sizing: border-box;
          @include name{
              border:themed("borderColor")
          }
       }
   }
}
